<template>
  <div class="api-left">
    <ul class="api-left_ul" v-if="async">
      <li class="api-left_li" v-for="(item,index) in viewModel" :key="index">
        <div class="api-menu1">
          <div class="menu1-icon1" :class="{'menu1-icon1_active':item.isEnable==true}"  @click="iconTab(item, index)"><i class="el-icon-caret-right"></i></div>
          <div class="menu1-icon2" @click="iconTab(item, index)">
            <i class="el-icon-folder" v-if="item.isEnable==false"></i>
            <i class="el-icon-folder-opened" v-else></i>
          </div>
          <div class="menu1-text" @click="iconTab(item, index)">{{item.info.name}}</div>
        </div>
        <ul class="api-menu2" v-if="item.isEnable" v-loading="item.isLoading">
          <li class="api-menu2_li" v-for="(cItem,cIndex) in item.children" :key="cIndex">
            <div class="menu2_li-ask ask_1" v-if="cItem.type == 2">GET</div>
            <div class="menu2_li-ask ask_2" v-else-if="cItem.type == 1">POST</div>
            <div class="menu2_li-ask ask_3" v-else-if="cItem.type == 3">PUT</div>
            <div class="menu2_li-ask ask_4" v-else-if="cItem.type == 4">DELETE</div>
            <div class="menu2_li-text" @click="menuTab(cItem, item)">{{getName(cItem)}}</div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>
<script>
  import ala from '@/service/ala'
  import menuJson from './menu.json'
  export default {
    data () {
      return {
        arrList: menuJson,
        viewModel: [],
        async: false
      }
    },
    created () { 
      this.init()
    },
    methods: {
      async init() {
        this.viewModel = await ala.httpGet('api/develop/apis')
        this.viewModel.forEach(item => {
          item.isEnable = false
          item.isLoading = true
          item.children = []
          item.value = item.info.name
        })
        this.$emit('changeData', this.viewModel)
        this.async = true
      },
      async iconTab (item, vIndex) {
        item.isEnable = !item.isEnable
        this.$set(this.viewModel, vIndex, item)
        if (item.children.length === 0) {
          let result = await ala.httpGet(`api/develop/apis?type=${item.info.fullName}`)
          if (result) {
            item.children = result[0].methods
            item.isLoading = false
          }
        }
        this.$set(this.viewModel, vIndex, item)
      },
      async menuTab (val, item) {
        let vare = JSON.parse(JSON.stringify(val))
        val.fullName = item.info.fullName
        this.$emit('apiChang', val)
      },
      getName(item) {
        if (item.name) {
          return `${item.name}(${item.url})`
        } else {
          return `${item.url}`
        }
      }
    }
  }
</script>
<style lang="scss">
  @import "./api-left.scss";
</style>